<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" th:with="title='首页',active='index',hasEditor=true"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="web/common/fragment::head(${title},null,'')"></head>
	<body>

		<div th:replace="web/layout/header::header(${active})"></div>
		<!--	main	-->
		<div class="fly-main">
			<div class="layui-row">
				<div class="fly-panel" pad20 style="padding-top: 5px;">

					<!--<div class="fly-none">没有权限</div>-->
					<div class="layui-form">
						<div class="layui-tab layui-tab-brief" lay-filter="user">
							<ul class="layui-tab-title">
								<li class="layui-this" th:text="${post==null?'发表新帖':'编辑帖子'}">发表新帖<!-- 编辑帖子 --></li>
							</ul>
							<div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
								<div class="layui-tab-item layui-show">
									<form action="" method="post">
										<input type="hidden" name="catalogId" th:value="${catalogId}">
										<div class="layui-form-item">
											<label for="postTitle" class="layui-form-label">标题</label>
											<div class="layui-input-block">
												<input type="text" id="postTitle" name="postTitle" required lay-verify="required" autocomplete="off" class="layui-input">
												<input type="hidden" name="postId" th:value="${postId}">
											</div>
										</div>
										<div class="layui-form-item layui-form-text">
											<label class="layui-form-label" for="editor">帖子内容</label>
											<div class="layui-input-block">
												<script id="editor" type="text/plain" style="width: 100%;height:500px;"></script>
												<!-- <textarea id="content" name="content" required lay-verify="required" placeholder="详细描述" class="layui-textarea fly-editor" style="height: 260px;"></textarea>
											-->
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">帖子类型</label>
												<div class="layui-input-inline" style="width: 200px;">
													<select name="postType" id="postType" lay-filter="postType" >
														<option value="0">普通帖子</option>
														<option value="1">付费可见</option>
														<option value="2">登录可见</option>
														<option value="3">回复可见</option>
													</select>
												</div>
												<div class="layui-form-mid layui-word-aux"></div>
											</div>
											<div class="layui-inline"  th:if="${not #lists.isEmpty(catalogTypeList)}">
												<label class="layui-form-label">栏目分类</label>
												<div class="layui-input-inline" style="width: 200px;z-index:10000;">
													<select lay-verify="required" id="ctId" name="ctId" lay-filter="column" style="">
														<!-- <option></option>-->
														<option th:each="type:${catalogTypeList}" th:value="${type.ctId}" th:text="${type.ctName}">unkown</option>
													</select>
												</div>
											</div>
										</div>

											<div id="publish-hide-content" class="layui-form-item layui-form-text layui-hide">
												<label class="layui-form-label">隐藏内容</label>
												<div class="layui-input-block">
													<textarea id="hideContent" name="hideContent" placeholder="隐藏内容" class="layui-textarea fly-editor" style="width:70%;"></textarea>
												</div>
											</div>
											<div  id="tiezi-price" class="layui-form-item layui-hide">
												<div class="layui-inline">
													<label class="layui-form-label">帖子积分</label>
													<div class="layui-input-inline" style="width: 200px;" >
														<select name="price">
															<option value="0">0</option>
															<option value="5">5</option>
															<option value="10">10</option>
															<option value="20">20</option>
															<option value="50">50</option>
														</select>
													</div>
													<div class="layui-form-mid layui-word-aux"></div>
												</div>
											</div>
										<!-- <div class="layui-form-item">
											<label for="L_vercode" class="layui-form-label">人类验证</label>
											<div class="layui-input-inline">
												<input type="text" id="L_vercode" name="vercode" required lay-verify="required" placeholder="请回答后面的问题" autocomplete="off" class="layui-input">
											</div>
											<div class="layui-form-mid">
												<span style="color: #c00;">1+1=?</span>
											</div>
										</div> -->
										<div class="layui-form-item">
											<div class="layui-inline">
											<label class="layui-form-label">允许评论</label>
											<div class="layui-input-inline">
												<input type="checkbox" id="commentState" name="commentState" lay-skin="switch" checked value="1" lay-text="是|否">
											</div>
											</div>
										</div> 
										<div class="layui-form-item">
											<button class="layui-btn" type="button" lay-filter="publishSubmit" lay-submit>立即发布</button>
											<button class="layui-btn layui-btn-primary" type="button" lay-filter="reset">重置</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--	contianer end	-->
<!--	底部版权		-->
<div th:replace="web/layout/footer::footer"></div>
<!--	搜索		-->
<div th:replace="web/layout/common::pop-search"></div>
<!--	右边工具栏	-->
<div th:replace="web/layout/common::right-bar"></div>
<!--	引入JS	-->
<div th:replace="web/common/fragment::js" ></div>

<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{
        toolbars:[[
            'paragraph','bold','italic','fontsize','fontborder','forecolor','backcolor','|','anchor','link','|','lineheight',
            'indent','justifyleft','justifycenter','|','insertcode','insertimage','fullscreen', //全屏
        ]
        ],
        textarea:'content'
    });

</script>
<script th:inline="javascript">
	var catalogId = [[${catalogId}]];
    layui.use('form', function(){
        var form = layui.form;
        var $ = layui.jquery;
        // 初始化是评论状态

		//监听帖子类型的变化，动态判断是否添加隐藏内容
        form.on('select(postType)', function(data){
            type=data.value;
			if(type==1){
				$('#tiezi-price').removeClass('layui-hide');
			}else{
				$('#tiezi-price').addClass('layui-hide');
			}
            if(type != 0){
                $('#publish-hide-content').removeClass('layui-hide');
            }else{
                $('#publish-hide-content').addClass('layui-hide');
            }
        });
        // 表单提交事件
        form.on('submit(publishSubmit)', function (data) {
        	//校验表单
        	checkForm(data);
            
            console.info(data.field);
            data.field.catalogId = catalogId;
            data.field.commentState = data.field.commentState==1?'1':'0';
            //data.field.parentId = data.field.parentId==null?'0':data.field.parentId;
            // 表单提交事件
            B.post({
                url: '/post/publish/',
                loading: true,
                data: data.field,
                success: function (data) {
                    if (data.success) {
                        B.info(data.msg);
                        window.location.href="/post/"+catalogId+"/1";
                    } else {
                        B.error(data.msg);
                    }
                }
            });
            
            return false;
        });
        function checkForm(data){
        	if(B.isEmpty(data.field.postTitle)){
        		B.error("标题不能为空");
        		return;
        	}
        	if(B.isEmpty(data.field.content)){
        		B.error("内容不能为空");
        		return;
        	}
        }
    })
</script>
	</body>
</html>
